<template>
  <view class="padding-10">
    <uni-title title="会员信息" type="h1"></uni-title>
    <view class="mainColor border-10 colorB" style="border: 1px solid #fff;margin-bottom: 20rpx;">
      <view class="padding-10">会员id： {{ memberInfo.memberId }}</view>
      <view class="padding-10">手机号： {{memberInfo.mobileNumber}}</view>
      <view class="padding-10">昵称： {{memberInfo.nickName}}</view>
      <view class="padding-10" v-for="item in plateNumberList" :key="item.id">已绑车牌：{{item}}</view>
      <view class="padding-10">本金金额： {{memberInfo.principalBalance}}</view>
      <view class="padding-10">赠送金额： {{memberInfo.giftBalance}}</view>
    </view>
    <uni-title title="个人桩信息" type="h1"></uni-title>
    <block v-for="(item,index) in personalPileInfoList" :key="index">
      <view class="mainColor border-10 colorB" style="border: 1px solid #fff;margin-bottom: 20rpx;">
        <view class="padding-10">桩编码：{{item.pileSn}}</view>
        <view class="padding-10">桩型号：{{item.modelName}}</view>
        <view class="padding-10">充电桩类型：{{item.speedType}}</view>
        <view class="padding-10">枪口数量：{{item.connectorNum}}</view>
        <view class="padding-10">身份类型：{{item.type}}</view>
        <view class="padding-10">状态：{{pileStatus(item.pileStatus)}}</view>
        <view class="padding-10">额定功率：{{item.ratedPower}} KW</view>
        <view class="padding-10">额定电流：{{item.ratedCurrent}} A</view>
      </view>
    </block>
    <uni-title title="会员充电订单" type="h1"></uni-title>
    <block v-for="(item,index) in orderList" :key="index">
      <view class="mainColor border-10 colorB" style="border: 1px solid #fff;margin-bottom: 20rpx;">
        <view class="padding-10">
          订单编号：
          <navigator :url="'/equipment/orderDetail/orderDetail?orderCode='+item.orderCode" style="color: aqua;">
            {{item.orderCode}}
          </navigator>
        </view>
        <view class="padding-10">订单状态描述：{{item.orderStatusDescribe}}</view>
        <view class="padding-10">会员昵称：{{item.nickName}}</view>
        <view class="padding-10">电话号码：{{item.mobileNumber}}</view>
        <view class="padding-10">站点：{{item.stationName}}</view>
        <view class="padding-10">充电桩枪口号：{{item.pileConnectorCode}}</view>
        <view class="padding-10">微信商户订单号：{{item.outTradeNo || '一'}}</view>
        <view class="padding-10">启动方式：{{startMode(item.startMode)}}</view>
        <view class="padding-10">支付方式：{{payMode(item.payMode)}}</view>
        <view class="padding-10">支付状态：{{payStatus(item.payStatus)}}</view>
        <view class="padding-10">支付金额：{{item.payAmount || '一'}}</view>
        <view class="padding-10">充电度数：{{item.chargingDegree || '一'}}</view>
        <view class="padding-10">起始SOC：{{item.startSoc || '一'}}</view>
        <view class="padding-10">终止SOC：{{item.endSoc || '一'}}</view>
        <view class="padding-10">开始充电时间：{{item.chargeStartTime || '一'}}</view>
        <view class="padding-10">结束充电时间：{{item.chargeEndTime || '一'}}</view>
        <view class="padding-10">订单总金额：{{item.orderAmount || '一'}}</view>
      </view>
    </block>
    <pagination :queryParams="queryOrderParams" :total="orderTotal" @changeNum="changeOrderNum"
      @changeSize="changeOrderAdd" @reset="resetOrder">
    </pagination>
    <uni-title title="会员交易记录" type="h1"></uni-title>
    <block v-for="(item,index) in memberTransactionList" :key="index">
      <view class="mainColor border-10 colorB" style="border: 1px solid #fff;margin-bottom: 20rpx;">
        <view class="padding-10">场景类型：{{scenarioType(item.scenarioType)}}</view>
        <view class="padding-10">操作类型：{{actionType(item.actionType)}}</view>
        <view class="padding-10">支付类型：{{item.payMode === 'balance' ? '余额支付' :'微信支付'}}</view>
        <view class="padding-10">金额：{{item.amount}}</view>
        <view class="padding-10">充电订单号：{{item.orderCode}}</view>
        <view class="padding-10">外部商户订单号：{{item.outTradeNo || '一'}}</view>
        <view class="padding-10">外部支付订单号：{{item.transactionId || '一'}}</view>
        <view class="padding-10">外部退款单号：{{item.outRefundNo || '一'}}</view>
        <view class="padding-10">外部支付退款单号SOC：{{item.refundId || '一'}}</view>
      </view>
    </block>
    <pagination :queryParams="queryMemberTransactionParams" :total="memberTransactionTotal" @changeNum="changeMemberNum"
      @changeSize="changeMemberAdd" @reset="resetMember">
    </pagination>
  </view>
</template>

<script>
  import {
    getInfo,
    getMemberPersonPileInfo,
    getMemberTransactionRecordList,
  } from "@/api/member/info";
  import {
    listOrder
  } from "@/api/order/order";
  import {
    pileStatus,
    orderStatus,
    startMode,
    payMode,
    payStatus,
    scenarioType,
    actionType
  } from '@/common/dict.js'
  export default {
    data() {
      return {
        pileStatusList: [],
        startModeList: [],
        orderStatusList: [],
        payModeList: [],
        payStatusList: [],
        scenarioTypeList: [],
        actionTypeList: [],
        plateNumberList: [],
        memberInfo: {}, // 会员信息
        queryOrderParams: {
          pageNum: 1,
          pageSize: 10,
          memberId: this.memberId,
        },
        personalPileInfoList: [], // 会员个人桩列表
        orderList: [],
        orderTotal: 0,
        // 查询账户数据参数
        queryMemberBalanceParams: {
          pageNum: 1,
          pageSize: 10,
          memberId: this.memberId,
        },
        memberTransactionList: [],
        memberTransactionTotal: 0,
        queryMemberTransactionParams: {
          pageNum: 1,
          pageSize: 10,
          memberId: this.memberId,
        },
      };
    },
    methods: {
      getList() {
        getInfo(this.memberId).then((response) => {
          this.memberInfo = response.data;
          this.plateNumberList = response.data.plateNumberList;
        });
      },
      getMemberPersonPileInfo() {
        getMemberPersonPileInfo(this.memberId).then(response => {
          this.personalPileInfoList = response.data;
          // console.log("personalPileInfoList==", response);
        });
      },
      getOrderList() {
        this.queryOrderParams.memberId = this.memberId;
        // console.log("getOrderList param===", this.queryOrderParams)
        listOrder(this.queryOrderParams).then(response => {
          this.orderList = response.rows;
          this.orderTotal = response.total;
        });
      },
      getMemberTransactionRecordList() {
        console.log(this.memberId, ' this.memberId');
        this.queryMemberTransactionParams.memberId = this.memberId;
        // console.log("查询账户变动记录 param:", this.queryMemberTransactionParams);
        getMemberTransactionRecordList(this.queryMemberTransactionParams).then(response => {
          // console.log("查询账户变动记录 result:", response);
          this.memberTransactionList = response.rows;
          this.memberTransactionTotal = response.total;
        })
      },
      pileStatus(status) {
        pileStatus.then(res => this.pileStatusList = res)
        let arr = this.pileStatusList.find(item => item.dictValue == status)
        if (arr == null) {
          return '一'
        } else {
          return arr.dictLabel
        }
      },
      startMode(status) {
        startMode.then(res => this.startModeList = res)
        let arr = this.startModeList.find(item => item.dictValue == status)
        if (arr == null) {
          return '一'
        } else {
          return arr.dictLabel
        }
      },
      payMode(status) {
        payMode.then(res => this.payModeList = res)
        let arr = this.payModeList.find(item => item.dictValue == status)
        if (arr == null) {
          return '一'
        } else {
          return arr.dictLabel
        }
      },
      payStatus(status) {
        payStatus.then(res => this.payStatusList = res)
        let arr = this.payStatusList.find(item => item.dictValue == status)
        if (arr == null) {
          return '一'
        } else {
          return arr.dictLabel
        }
      },
      scenarioType(status) {
        scenarioType.then(res => this.scenarioTypeList = res)
        let arr = this.scenarioTypeList.find(item => item.dictValue == status)
        if (arr == null) {
          return '一'
        } else {
          return arr.dictLabel
        }
      },
      actionType(status) {
        actionType.then(res => this.actionTypeList = res)
        let arr = this.actionTypeList.find(item => item.dictValue == status)
        if (arr == null) {
          return '一'
        } else {
          return arr.dictLabel
        }
      },
      orderStatus(status) {
        orderStatus.then(res => this.orderStatusList = res)
        let arr = this.orderStatusList.find(item => item.dictValue == status)
        if (arr == null) {
          return '一'
        } else {
          return arr.dictLabel
        }
      },
      changeMemberNum(e) {
        this.queryMemberTransactionParams.pageNum = e
        this.getMemberTransactionRecordList()
      },
      changeMemberAdd(e) {
        this.queryMemberTransactionParams.pageSize = e
        this.getMemberTransactionRecordList()
      },
      resetMember() {
        this.queryMemberTransactionParams.pageSize = 10
        this.queryMemberTransactionParams.pageNum = 1
        this.getMemberTransactionRecordList();
      },

      changeOrderNum(e) {
        this.queryOrderParams.pageNum = e
        this.getOrderList()
      },
      changeOrderAdd(e) {
        this.queryOrderParams.pageSize = e
        this.getOrderList()
      },
      resetOrder() {
        this.queryOrderParams.pageSize = 10
        this.queryOrderParams.pageNum = 1
        this.getOrderList();
      },
    },
    onLoad(option) {
      this.memberId = option.id
      this.getList()
      this.getMemberPersonPileInfo()
      this.getOrderList()
      this.getMemberTransactionRecordList()
    }
  }
</script>

<style lang="scss" scoped>

</style>